<template>
	<view>
		<view class="head">
			<text class="title">剩余赠送鱼米优选数量:{{gg_shop_num}}</text>
			<image class="portrait" :src="userHeadPic?userHeadPic:'/static/missing-face.png'"></image>

		</view>

		<block v-if="teams.length">
			<view class="teamsCon" v-for="(item ,index) in teams" :key="index">
				<image :src="item.shopImg" class="teamImg" mode="aspectFit"></image>
				<view class="context">
					<view class="firsrLab">
						<view class="">
							<text>{{item.shopName}}</text>
							<text>{{item.shopCompany}}</text>
						</view>
						<view class="">
							{{item.userPhone}}
						</view>
						<view>{{item.createTime}}</view>
					</view>
					<view @click="upgrade(item)" :class="hasright?'lvup':'lvup_disbale'" v-if="hasright && item.canUpgrade">升级呱呱商家</view>
					<view class="lvup" style="background-color: #027aff;" v-else-if="item.rankName">{{item.rankName}}</view>
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userHeadPic: '',
				teams: [],
				userlist: [],
				gg_shop_num: '',
				hasright: false,
				type: 2,
			}
		},

		onLoad(options) {
			if (options.userImg) {
				this.userHeadPic = options.userImg
				this.loadTeam()
			}

			this.getshopinfo()
		},
		methods: {
			upgrade(item) {
				let that = this;
				var isdisbale = item.canUpgrade;
				let data = {
					userId: item.userId,
					type: 2
				}
				that.$Request.request('/api/user_center/doGive', 'POST', data).then(res => {
					if(res.status == 1){
						that.$api.msg(res.msg || '升级成功');
						that.getshopinfo()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getshopinfo() {
				let that = this;
				that.$Request.request('/api/Usercentinfo/subTraders', 'GET', {}).then(res => {
					if (res.status == 1) {
					that.teams = res.data.list;
					that.gg_shop_num = res.data.gg_shop_num
					that.hasright =res.data.hasRight
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			loadTeam() {
				let that = this
				that.$Request.request('/api/Usercentinfo/getSubordinate', 'GET', {}).then(res => {
					console.log(res)
					if (res.status == 1) {
					
					that.teams = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #F8F8F8;
	}

	.lvup_disbale {
		background-color: #999999;
		color: #fff;
		position: absolute;
		right: 0;
		transform: translateY(-50%);
		top: 50%;
		font-size: 24upx;
		border-radius: 5px;
		width: 180upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
	}

	.lvup {
		position: absolute;
		right: 0;
		transform: translateY(-50%);
		top: 50%;
		background-color: #ff6600;
		color: #fff;
		font-size: 24upx;
		border-radius: 5px;
		width: 180upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
	}

	.head {
		width: 100%;
		height: 330rpx;
		background-image: url(../static/images/treeBg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		@extend %flexAlCenter;
		flex-direction: column;

		.title {
			font-size: 14px;
			margin-bottom: 10px;
			color: #fff;
		}

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}
	}

	.teamsCon {
		border-radius: 10rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.4);
		margin: 30rpx auto;
		background-color: #fff;
		width: 720rpx;
		color: #999999;
		font-size: $uni-font-size-base;
		// @extend %flexBetw;
		padding: 26rpx;
		display: flex;

		.teamImg {
			width: 150rpx;
			height: 150rpx;
			border-radius: 8rpx;
		}

		.context {
			height: 150rpx;
			width: 75%;
			position: relative;
			// @extend %flexVerticalBetw;

			.firsrLab {
				margin-left: 10px;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
</style>
